<template>
	<!-- 活动商品 -->
	<view class="activity-wrap u-p-x-10 u-p-b-10  u-m-b-10 groupon-card " >
		<!-- 标题栏 -->
		<view class="title-box u-flex u-row-between u-p-y-10 groupon-title">
			<view class="u-flex u-col-center">
				<view class="title-text u-m-r-20 u-ellipsis-1">精品店铺</view>
			</view>
		</view>
		<!-- 活动商品 -->
		<!-- m -->
		<scroll-view  class="scroll-box" scroll-x scroll-anchoring>
			<view class="goods-box u-flex">
				<view class="min-goods u-m-r-14" v-for="mgoods in goodsList" :key="mgoods.id" @tap="jump(mgoods.id)">
					<view class="img-box"><image class="img" :src="mgoods.logo" mode=""></image></view>
					<view class="mgoods-card-bottom u-p-10">
						<view class="goods-title u-m-b-10 u-ellipsis-1">{{ mgoods.name }}</view>
					</view>
				</view>
			</view>
		</scroll-view> 
	</view>
</template>

<script>
/**
 * 自定义之拼团样式组件
 * @property {Object} detail - 秒杀商品信息
 */
export default {
	components: {},
	data() {
		return {
			timestamp: 0, //倒计时
			goodsList: this.detail,
			showActivity: true, //是否显示活动。
			
		};
	},
	props: {
		detail: {}
	},
	watch: {},
	computed: {},
	created() {
	 
	},
	methods: {
		// 路由跳转
		jump(stroeId) {
			uni.setStorageSync("detailStoreId",stroeId)
		this.$Router.push({
			path: '/pages/store/index',
			query: {
				id: stroeId
			      }
		})
		},
	}
};
</script>

<style lang="scss" scoped>
.groupon-card {
	width: 96%;
	margin-left: 2%;
	height: 100%;
	background:linear-gradient(to right, #f4514b , #eb2865) ;
	background-size: contain;
	background-repeat: no-repeat;
	border-radius: 10rpx;
}

 
.activity-wrap {
	background-color: #fff;
	min-height: 260rpx;
	.title-box {
		.title-text {
			font-size: 30rpx;
			font-weight: bold;
			color: #FFF;
		}
		.more-box {
			.more-text {
				font-size: 22rpx;
				font-weight: 500;
				color: #333333;
			}
			.more-icon {
				font-size: 24rpx;
				color: #333333;
			}
		}
	}

	.scroll-box{
		height: 220rpx;
		width: 96%;
		margin-left: 2%;
		background:linear-gradient(to right, #f4514b , #eb2865) ;
		background-size: contain;
		background-repeat: no-repeat;
		border-radius: 10rpx;
		 
	}
	.goods-box {
		height: 220rpx;
		 
	
	}
}

// 小商品卡片
.min-goods {
	width: 150rpx;
	height: 200rpx;
	border-radius: 10rpx;
	margin-left: 10rpx;
	background: #fff;
	.img-box {
		width: 140rpx;
		height: 160rpx;
		overflow: hidden;
		position: relative;
		border-radius: 10rpx 10rpx 0 0;
		text-align: center;
		
		
		.img {
		width: 120rpx;
		height: 120rpx;
		 
			margin-top: 20rpx;
			border-radius: 50%;
			text-align: center;
			background-color: #ccc;
		}
	}
	.mgoods-card-bottom {

	//	background: url($IMG_URL+'/imgs/tag/groupon_goods_bg.png') no-repeat;
		background-position: bottom center;
		background-size: 100% 100%;
	}
	.goods-title {
		font-size: 26rpx;
		font-weight: 600;
		color: #000000;
	 
		line-height: 26rpx;
		text-align: center;
	}

	.price {
		font-size: 30rpx;
		font-weight: 500;
		color: #ff0000;
		&::before {
			content: '￥';
			font-size: 24rpx;
		}
	}
	.original-price {
		font-size: 20rpx;
		font-weight: 500;
		text-decoration: line-through;
		color: #c4c4c4;
	}
	.groupon-num-box {
		.avatar-box {
			direction: rtl;
			unicode-bidi: bidi-override;
			height: 30rpx;
			.avatar-img {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				background-color: #f5f5f5;
			}
		}
		.groupon-num-text {
			font-size: 18rpx;
			font-weight: 500;
			color: #e9b461;
		}
	}
}
 
</style>
